<template>

    <div class="div-tl">
        <el-row :gutter="20">
            <el-col :span="8">
                <el-card shadow="hover" class="mgb20" style="height:252px;">
                    <div class="user-info">
                        <div class="user-info-cont" align="center">
                            <div class="user-info-name" v-text="nickName"></div>
                            <div v-text="roleName" ></div>
                            <div>您好</div>
                        </div>
                    </div>
                    <div align="center">
                    <div class="user-info-list" >上次登录时间：{{time}}</div>
                    <div class="user-info-list">上次操作：{{act}}</div>
                    </div>
                </el-card>
                <el-card shadow="hover" style="height:252px;">
                    <div slot="header" class="clearfix">
                        <span>系统详情</span>
                    </div>
                    设备使用率
                    <el-progress :percentage="90.3" color="#42b983"></el-progress>
                    设备损坏率
                    <el-progress :percentage="3.2" color="#f1e05a"></el-progress>
                    项目完成率
                    <el-progress :percentage="80.6"></el-progress>
                    人员活跃度
                    <el-progress :percentage="95.7" color="red" ></el-progress>
                </el-card>
            </el-col>
            <el-col :span="16">
                <el-row :gutter="20" class="mgb20">
                    <el-col :span="8">
                        <el-card shadow="hover" :body-style="{padding: '0px'}">
                            <div class="grid-content grid-con-1">
                                <i class="el-icon-lx-people grid-con-icon"></i>
                                <div class="grid-cont-right">
                                    <div class="grid-num">{{devnum}}</div>
                                    <div>设备总数</div>
                                </div>
                            </div>
                        </el-card>
                    </el-col>
                    <el-col :span="8">
                        <el-card shadow="hover" :body-style="{padding: '0px'}">
                            <div class="grid-content grid-con-2">
                                <i class="el-icon-lx-notice grid-con-icon"></i>
                                <div class="grid-cont-right">
                                    <div class="grid-num">{{pronum}}</div>
                                    <div>项目总数</div>
                                </div>
                            </div>
                        </el-card>
                    </el-col>
                    <el-col :span="8">
                        <el-card shadow="hover" :body-style="{padding: '0px'}">
                            <div class="grid-content grid-con-3">
                                <i class="el-icon-lx-goods grid-con-icon"></i>
                                <div class="grid-cont-right">
                                    <div class="grid-num">{{pepnum}}</div>
                                    <div>活跃人数</div>
                                </div>
                            </div>
                        </el-card>
                    </el-col>
                </el-row>
                <el-card shadow="hover" style="height:403px;">
                    <div slot="header" class="clearfix">
                        <div align="left" >
                            <span >事项</span>
                            <i class="el-icon-plus" align="right" @click="showDig()"  ></i>
                        </div>
                    </div>
                    <el-table :data="thinglist" :show-header="false" height="304" style="width: 100%;font-size:14px;">
                        <el-table-column>
                            <template slot-scope="scope">
                                <div class="todo-item" :class="{'todo-item-del': scope.row.status}"  @click="getRow(scope.row)">{{scope.row.title}}</div>
                            </template>
                        </el-table-column>
                    </el-table>
                </el-card>
            </el-col>
        </el-row>
        <el-row :gutter="20" >
            <el-col :span="12">
                <el-card shadow="hover" style="height:300px;">
                    <!--<chart ref="chart1" :options="orgOptions" style="width:100%;" ></chart>-->
                    <div id="myChart" style="width:100%;height:300px"></div>
                </el-card>
            </el-col>
            
            <el-col :span="12">
                <el-card shadow="hover" style="height:300px;">
                    <!--<chart ref="chart2" :options="orgOptions" style="width:100%;" ></chart>-->
                    <div id="myChart2" style="width:100%;height:300px"></div>
                </el-card>
            </el-col>
        </el-row>   

        <el-dialog title='增加通知' :visible.sync="dialogFormVisible">


            <el-form class="small-space"  label-position="left" label-width="100px"
               style='width: 600px; margin-left:50px;' >

               <el-form-item label="通知对象">
                   <el-select v-model="temp.object" placeholder="请选择">
                        <el-option
                        v-for="item in nickNameList"
                        :key="item.nickname"
                        :label="item.nickname"
                        :value="item.nickname">
                        </el-option>
                   </el-select>
               </el-form-item>
               <el-form-item label="通知标题">
                   <el-input type="text" v-model="temp.title" style="width: 100% ;">
                   </el-input>

               </el-form-item>
               <el-form-item label="通知内容">
                   <el-input type="textarea" v-model="temp.content" style="width: 100% ;"  :rows="4" placeholder="请输入内容" >
                   </el-input>

               </el-form-item>

            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button  @click="createThing()">发布</el-button>
            </div>

        </el-dialog>
        <el-dialog title='详情' :visible.sync="detail">
            <div align="center">{{detail_title}}</div>
            <div >{{detail_content}}</div>
            <div slot="footer" class="dialog-footer">
                <el-button @click="detail = false">关闭</el-button>
            </div>

        </el-dialog>






    </div>


</template>

<script>
import global from '../../Global'
export default {

  data () {
    return {
      act:'申请设备',
      time:(new Date()).toLocaleDateString(),
      thinglist:[],
      detail_title:'',
      detail_content:'',
      temp:{
          object:'',
          title:'',
          content:'',
      },
      nickNameList:'',
      roleName : global.obj.roleName,
      nickName : global.obj.nickName,
      datalist:'',
      devnum:0,
      pronum:0,
      pepnum:0,
      dialogFormVisible: false,
      detail:false,
    }
  },


  mounted() {
      this.getThing();
      

  },

    created(){
        this.handleListener();
        this.getList();
        this.getNickName();
    },
    activated(){
        this.handleListener();
    },


methods: {
    showDig(){
        this.dialogFormVisible = true;
    },
    getList() {
        this.api({
            url: "/data/listdata",
            method: "get"
        }).then(data => {
            this.datalist = data;
            this.devnum = data.list[0].device_num;
            this.pronum = data.list[0].project_num;
            this.pepnum = data.list[0].people_num;
            console.log(this.datalist.list[0]);
            var options = {
                title:{
                text:"设备空置率"  
                },
                toolbox: {
                    show : true,
                    feature : {
                        dataView : {show: true, readOnly: false},
                        saveAsImage : {show: true}
                    }
                },
                legend: {},
                tooltip: {
                    trigger: 'axis',
                    //showContent: false
                },
                dataset: {
                    source: [
                        ['month', '一月份', '二月份', '三月份', '四月份'],
                        ['5号', this.datalist.list[0].device_month1_5_rate, this.datalist.list[0].device_month2_5_rate, this.datalist.list[0].device_month3_5_rate, this.datalist.list[0].device_month4_5_rate],
                        ['10号', this.datalist.list[0].device_month1_10_rate, this.datalist.list[0].device_month2_10_rate, this.datalist.list[0].device_month3_10_rate, this.datalist.list[0].device_month4_10_rate],
                        ['15号', this.datalist.list[0].device_month1_15_rate, this.datalist.list[0].device_month2_15_rate, this.datalist.list[0].device_month3_15_rate, this.datalist.list[0].device_month4_15_rate],
                        ['20号', this.datalist.list[0].device_month1_20_rate, this.datalist.list[0].device_month2_20_rate, this.datalist.list[0].device_month3_20_rate, this.datalist.list[0].device_month4_20_rate],
                        ['25号', this.datalist.list[0].device_month1_25_rate, this.datalist.list[0].device_month2_25_rate, this.datalist.list[0].device_month3_25_rate, this.datalist.list[0].device_month4_25_rate],
                    ]
                },
                xAxis: {type: 'category'},
                yAxis: {type: 'value',
                axisLabel: {
                        formatter: '{value} %'
                    }},
                grid: {right: '40%'},
                series: [
                    {type: 'line', smooth: true},
                    {type: 'line', smooth: true},
                    {type: 'line', smooth: true},
                    {type: 'line', smooth: true},
                    {
                        radius: ['30%', '50%'],
                        avoidLabelOverlap: false,
                        label: {
                            normal: {
                                show: false,
                                position: 'center'
                            },
                            emphasis: {
                                show: true,
                                textStyle: {
                                    fontSize: '30',
                                    fontWeight: 'bold'
                                }
                            }
                        },
                        type: 'pie',
                        id: 'pie',
                        labelLine: {
                        normal: {
                                show: false
                            }
                        },
                        data:[
                            {value:this.datalist.list[0].device_w_num, name:'维修'},
                            {value:this.datalist.list[0].device_use_num, name:'使用'},
                            {value:this.datalist.list[0].device_bad_num, name:'停用'},
                            {value:this.datalist.list[0].device_fre_num, name:'空闲'},
                        ],
                        center: ['75%','55%']

                    }
                ]
        };
        let myChart = this.$echarts.init(document.getElementById('myChart'));
        myChart.setOption(options);


        let options2 = {
            title:{
            text:'活跃度'  
            },
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'cross',
                    crossStyle: {
                        color: '#999'
                    }
                }
            },
            toolbox: {
                show : true,
                feature : {
                    dataView : {show: true, readOnly: false},
                    saveAsImage : {show: true}
                }
            },
            legend: {
                data:['人员活跃度','项目活跃度','设备活跃度']
            },
            xAxis: [
                {
                    type: 'category',
                    data: ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月'],
                    axisPointer: {
                        type: 'shadow'
                    }
                }
            ],
            yAxis: [
                {
                    type: 'value',
                    min: 0,
                    max: 100,
                    interval: 10,
                    axisLabel: {
                        formatter: '{value} %'
                    }
                },
                {
                    type: 'value',
                    min: 0,
                    max: 100,
                    interval: 10,
                    axisLabel: {
                        formatter: '{value} %'
                    }

                },
                {
                    type: 'value',
                    min: 0,
                    max: 100,
                    interval: 10,
                    axisLabel: {
                        formatter: '{value} %'
                    }

                }
            ],
            series: [
                {
                    name:'人员活跃度',
                    type:'bar',
                    data:[this.datalist.list[0].month1_people_act_rate, 
                    this.datalist.list[0].month2_people_act_rate,
                    this.datalist.list[0].month3_people_act_rate,
                    this.datalist.list[0].month4_people_act_rate,
                    this.datalist.list[0].month5_people_act_rate,
                    this.datalist.list[0].month6_people_act_rate, 
                    this.datalist.list[0].month7_people_act_rate, 
                    this.datalist.list[0].month8_people_act_rate,
                    this.datalist.list[0].month9_people_act_rate,
                    this.datalist.list[0].month10_people_act_rate,
                    this.datalist.list[0].month11_people_act_rate, 
                    this.datalist.list[0].month12_people_act_rate]
                },
                {
                    name:'项目活跃度',
                    type:'bar',
                    data:[this.datalist.list[0].month1_project_act_rate, 
                    this.datalist.list[0].month2_project_act_rate,
                    this.datalist.list[0].month3_project_act_rate,
                    this.datalist.list[0].month4_project_act_rate,
                    this.datalist.list[0].month5_project_act_rate,
                    this.datalist.list[0].month6_project_act_rate, 
                    this.datalist.list[0].month7_project_act_rate, 
                    this.datalist.list[0].month8_project_act_rate,
                    this.datalist.list[0].month9_project_act_rate,
                    this.datalist.list[0].month10_project_act_rate,
                    this.datalist.list[0].month11_project_act_rate, 
                    this.datalist.list[0].month12_project_act_rate]
                },
                {
                    name:'设备活跃度',
                    type:'bar',
                    yAxisIndex: 1,
                    data:[this.datalist.list[0].month1_device_act_rate, 
                    this.datalist.list[0].month2_device_act_rate,
                    this.datalist.list[0].month3_device_act_rate,
                    this.datalist.list[0].month4_device_act_rate,
                    this.datalist.list[0].month5_device_act_rate,
                    this.datalist.list[0].month6_device_act_rate, 
                    this.datalist.list[0].month7_device_act_rate, 
                    this.datalist.list[0].month8_device_act_rate,
                    this.datalist.list[0].month9_device_act_rate,
                    this.datalist.list[0].month10_device_act_rate,
                    this.datalist.list[0].month11_device_act_rate, 
                    this.datalist.list[0].month12_device_act_rate]
                }
            ]
        };
        let myChart2 = this.$echarts.init(document.getElementById('myChart2'));
        myChart2.setOption(options2);
        
        });
        

    },
    getNickName(){
        this.api({
          url: "/user/listNickName",
          method: "get"
        }).then(data => {
          this.nickNameList = data.list;
          this.nickNameList.push({nickname:'全体成员'});
          console.log(this.nickNameList);
        })

    },


    getThing(){
        //查询所有事务
        this.api({
          url: "/thing/listThing",
          method: "post",
          data:{
              nickName:global.obj.nickName
          }
        }).then(data => {
          this.thinglist = data.list;
          console.log(this.thinglist);
        })

    },
    createThing(){
        //查询所有事务
        this.api({
          url: "/thing/addThing",
          method: "post",
          data:this.temp
        }).then(() =>{
            this.getThing();
            this.dialogFormVisible = false;
            this.$message({
            type: 'success',
            message: '发布成功'
          });
            

        }
            
        );
        

    },
    getRow(row){
        this.detail = true;
        this.detail_title = row.title;
        this.detail_content = row.content;
        console.log(row);
    },



    handleListener(){
        // 调用renderChart方法对图表进行重新渲染
        window.addEventListener('resize', this.renderChart)
    },
    handleBus(msg){
        setTimeout(() => {
            this.renderChart()
        }, 30);
    },
    renderChart(){
        let myChart = this.$echarts.init(document.getElementById('myChart'));
        myChart.resize();
        let myChart2 = this.$echarts.init(document.getElementById('myChart2'));
        myChart2.resize();
        //this.$refs.chart1.resize();
        //this.$refs.chart2.resize();

    }
}


}
    </script>


<style scoped>
    .div-tl{
        margin-top: 20px;
        margin-left: 20px;
        margin-right: 20px;
    }
    .el-row {
        margin-bottom: 20px;
    }

    .grid-content {
        display: flex;
        align-items: center;
        height: 100px;
    }

    .grid-cont-right {
        flex: 1;
        text-align: center;
        font-size: 14px;
        color: #999;
    }

    .grid-num {
        font-size: 30px;
        font-weight: bold;
    }

    .grid-con-icon {
        font-size: 50px;
        width: 100px;
        height: 100px;
        text-align: center;
        line-height: 100px;
        color: #fff;
    }

    .grid-con-1 .grid-con-icon {
        background: rgb(45, 140, 240);
    }

    .grid-con-1 .grid-num {
        color: rgb(45, 140, 240);
    }

    .grid-con-2 .grid-con-icon {
        background: rgb(100, 213, 114);
    }

    .grid-con-2 .grid-num {
        color: rgb(100, 213, 114);
    }

    .grid-con-3 .grid-con-icon {
        background: rgb(242, 94, 67);
    }

    .grid-con-3 .grid-num {
        color: rgb(242, 94, 67);
    }

    .user-info {
        display: flex;
        align-items: center;
        padding-bottom: 20px;
        border-bottom: 2px solid #ccc;
        margin-bottom: 20px;
    }

    .user-avator {
        width: 120px;
        height: 120px;
        border-radius: 50%;
    }

    .user-info-cont {
        padding-left: 50px;
        flex: 1;
        font-size: 14px;
        color: #999;
    }

    .user-info-cont div:first-child {
        font-size: 30px;
        color: #222;
    }

    .user-info-list {
        font-size: 14px;
        color: #999;
        line-height: 25px;
    }

    .user-info-list span {
        margin-left: 70px;
    }

    .mgb20 {
        margin-bottom: 20px;
    }

    .todo-item {
        font-size: 14px;
    }

    .todo-item-del {
        text-decoration: line-through;
        color: #999;
    }

 

</style>